<template>
  <a-spin :spinning="loading" :wrapperClassName="`approval-native-form-page pl-3 ${isInModal ? 'is-in-model' : ''}`">
    <div v-if="isLoaded" class="approval-native-form">
      <div class="approval-form-container">
        <div class="form-content-title">基本信息</div>
        <div :class="disabled ? 'cyj-form-container-disabled cyj-form-detail-effect' : 'cyj-and-modal-form'">
          <fieldset :disabled="disabled">
            <a-form v-bind="formItemLayout" :model="formState" :rules="validatorRules" name="ProjectProposalPreparationForm" ref="formRef">
              <a-row>
                <a-col v-show="judgeIf('project_proposal_preparation_project_name', true)" :span="12">
                  <a-form-item label="立项名称	" v-bind="validateInfos.projectName" id="project_proposal_preparation_project_name" name="projectName">
                    <a-input
                      v-model:value="formState.projectName"
                      placeholder="请输入立项名称	"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_project_name', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_project_code', true)" :span="12">
                  <a-form-item label="立项编码	" v-bind="validateInfos.projectCode" id="project_proposal_preparation_project_code" name="projectCode">
                    <a-input
                      v-model:value="formState.projectCode"
                      placeholder="请输入立项编码	"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_project_code', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_compile_date', true)" :span="12">
                  <a-form-item label="编制时间" v-bind="validateInfos.compileDate" id="project_proposal_preparation_compile_date" name="compileDate">
                    <a-date-picker
                      placeholder="请选择编制时间"
                      v-model:value="formState.compileDate"
                      value-format="YYYY-MM-DD"
                      style="width: 100%"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_compile_date', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_project_type', true)" :span="12">
                  <a-form-item label="项目类别" v-bind="validateInfos.projectType" id="project_proposal_preparation_project_type" name="projectType">
                    <j-dict-select-tag
                      v-model:value="formState.projectType"
                      dictCode="project"
                      placeholder="请选择项目类别"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_project_type', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_vision_no', true)" :span="12">
                  <a-form-item label="版本号" v-bind="validateInfos.visionNo" id="project_proposal_preparation_vision_no" name="visionNo">
                    <a-input
                      v-model:value="formState.visionNo"
                      placeholder="请输入版本号"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_vision_no', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_need_expert', true)" :span="12">
                  <a-form-item
                    label="是否需集团审批"
                    v-bind="validateInfos.needExpert"
                    id="project_proposal_preparation_need_expert"
                    name="needExpert"
                  >
                    <j-dict-select-tag
                      type="radio"
                      v-model:value="formState.needExpert"
                      dictCode="yn"
                      placeholder="请选择是否需集团审批"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_need_expert', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_expert_reason', true)" :span="12">
                  <a-form-item
                    label="需集团审批原因"
                    v-bind="validateInfos.expertReason"
                    id="project_proposal_preparation_expert_reason"
                    name="expertReason"
                  >
                    <a-input
                      v-model:value="formState.expertReason"
                      placeholder="请输入需集团审批原因"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_expert_reason', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_has_sub_budget', true)" :span="12">
                  <a-form-item
                    label="集团归口部门"
                    v-bind="validateInfos.hasSubBudget"
                    id="project_proposal_preparation_has_sub_budget"
                    name="hasSubBudget"
                  >
                    <a-input v-model:value="formState.hasSubBudget" placeholder="请选择集团归口部门">
                      <template #addonAfter>
                        <div @click="openModalClick('hasSubBudget')">
                          <MenuUnfoldOutlined />
                        </div>
                      </template>
                    </a-input>
                    <DepartmentSelect
                      :ref="(el) => el && (modalRefs['hasSubBudget'] = el)"
                      @change="(value, options) => onChangeOfModal(value, options, 'hasSubBudget', 'department_name')"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_responsible_entity', true)" :span="12">
                  <a-form-item
                    label="项目责任主体"
                    v-bind="validateInfos.responsibleEntity"
                    id="project_proposal_preparation_responsible_entity"
                    name="responsibleEntity"
                  >
                    <a-input v-model:value="formState.responsibleEntity" placeholder="请选择项目责任主体">
                      <template #addonAfter>
                        <div @click="openModalClick('responsibleEntity')">
                          <MenuUnfoldOutlined />
                        </div>
                      </template>
                    </a-input>
                    <UserSelect
                      :ref="(el) => el && (modalRefs['responsibleEntity'] = el)"
                      @change="(value, options) => onChangeOfModal(value, options, 'responsibleEntity', 'employee_name')"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_project_amount_summary', true)" :span="12">
                  <a-form-item
                    label="立项总金额"
                    v-bind="validateInfos.projectAmountSummary"
                    id="project_proposal_preparation_project_amount_summary"
                    name="projectAmountSummary"
                  >
                    <a-input-number
                      v-model:value="formState.projectAmountSummary"
                      placeholder="请输入立项总金额"
                      style="width: 100%"
                      :disabled="judgeRead('project_proposal_preparation_project_amount_summary', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_project_amount_desc', true)" :span="12">
                  <a-form-item
                    label="立项金额说明"
                    v-bind="validateInfos.projectAmountDesc"
                    id="project_proposal_preparation_project_amount_desc"
                    name="projectAmountDesc"
                  >
                    <a-textarea
                      v-model:value="formState.projectAmountDesc"
                      :rows="4"
                      placeholder="请输入立项金额说明"
                      :disabled="judgeRead('project_proposal_preparation_project_amount_desc', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_amount_detail-compileBasis', true)" :span="12">
                  <a-form-item label="编制依据" v-bind="validateInfos.compileBasis" id="project_amount_detail-compileBasis" name="compileBasis">
                    <a-textarea
                      v-model:value="formState.compileBasis"
                      :rows="4"
                      placeholder="请输入编制依据"
                      :disabled="judgeRead('project_amount_detail-compileBasis', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_quantity_desc', true)" :span="12">
                  <a-form-item
                    label="工程量说明"
                    v-bind="validateInfos.quantityDesc"
                    id="project_proposal_preparation_quantity_desc"
                    name="quantityDesc"
                  >
                    <a-textarea
                      v-model:value="formState.quantityDesc"
                      :rows="4"
                      placeholder="请输入工程量说明"
                      :disabled="judgeRead('project_proposal_preparation_quantity_desc', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_unit_price_desc', true)" :span="12">
                  <a-form-item
                    label="单价说明"
                    v-bind="validateInfos.unitPriceDesc"
                    id="project_proposal_preparation_unit_price_desc"
                    name="unitPriceDesc"
                  >
                    <a-textarea
                      v-model:value="formState.unitPriceDesc"
                      :rows="4"
                      placeholder="请输入单价说明"
                      :disabled="judgeRead('project_proposal_preparation_unit_price_desc', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_cost_calculation_desc', true)" :span="12">
                  <a-form-item
                    label="费用计算说明"
                    v-bind="validateInfos.costCalculationDesc"
                    id="project_proposal_preparation_cost_calculation_desc"
                    name="costCalculationDesc"
                  >
                    <a-textarea
                      v-model:value="formState.costCalculationDesc"
                      :rows="4"
                      placeholder="请输入费用计算说明"
                      :disabled="judgeRead('project_proposal_preparation_cost_calculation_desc', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_benchmark_analysis', true)" :span="12">
                  <a-form-item
                    label="对标分析"
                    v-bind="validateInfos.benchmarkAnalysis"
                    id="project_proposal_preparation_benchmark_analysis"
                    name="benchmarkAnalysis"
                  >
                    <a-textarea
                      v-model:value="formState.benchmarkAnalysis"
                      :rows="4"
                      placeholder="请输入对标分析"
                      :disabled="judgeRead('project_proposal_preparation_benchmark_analysis', false)"
                    />
                  </a-form-item>
                </a-col>

                <a-col v-show="judgeIf('project_proposal_preparation_audit_basis', true)" :span="12">
                  <a-form-item label="审核依据" v-bind="validateInfos.auditBasis" id="project_proposal_preparation_audit_basis" name="auditBasis">
                    <a-input
                      v-model:value="formState.auditBasis"
                      placeholder="请输入审核依据"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_audit_basis', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_audit_principle', true)" :span="12">
                  <a-form-item
                    label="审核原则"
                    v-bind="validateInfos.auditPrinciple"
                    id="project_proposal_preparation_audit_principle"
                    name="auditPrinciple"
                  >
                    <a-input
                      v-model:value="formState.auditPrinciple"
                      placeholder="请输入审核原则"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_audit_principle', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_audit_opinion', true)" :span="12">
                  <a-form-item
                    label="审核意见"
                    v-bind="validateInfos.auditOpinion"
                    id="project_proposal_preparation_audit_opinion"
                    name="auditOpinion"
                  >
                    <a-input
                      v-model:value="formState.auditOpinion"
                      placeholder="请输入审核意见"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_audit_opinion', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_record_number', true)" :span="12">
                  <a-form-item
                    label="备案编号"
                    v-bind="validateInfos.recordNumber"
                    id="project_proposal_preparation_record_number"
                    name="recordNumber"
                  >
                    <a-input
                      v-model:value="formState.recordNumber"
                      placeholder="请输入备案编号"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_record_number', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_record_amount', true)" :span="12">
                  <a-form-item
                    label="备案金额"
                    v-bind="validateInfos.recordAmount"
                    id="project_proposal_preparation_record_amount"
                    name="recordAmount"
                  >
                    <a-input-number
                      v-model:value="formState.recordAmount"
                      placeholder="请输入备案金额"
                      style="width: 100%"
                      :disabled="judgeRead('project_proposal_preparation_record_amount', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_record_reason', true)" :span="12">
                  <a-form-item
                    label="备案原因"
                    v-bind="validateInfos.recordReason"
                    id="project_proposal_preparation_record_reason"
                    name="recordReason"
                  >
                    <a-input
                      v-model:value="formState.recordReason"
                      placeholder="请输入备案原因"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_record_reason', false)"
                    />
                  </a-form-item>
                </a-col>

                <a-col v-show="judgeIf('project_proposal_preparation_process_instance_id', true)" :span="12">
                  <a-form-item
                    label="流程实例id"
                    v-bind="validateInfos.processInstanceId"
                    id="project_proposal_preparation_process_instance_id"
                    name="processInstanceId"
                  >
                    <a-input
                      v-model:value="formState.processInstanceId"
                      placeholder="请输入流程实例id"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_process_instance_id', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_process_status', true)" :span="12">
                  <a-form-item
                    label="流程状态"
                    v-bind="validateInfos.processStatus"
                    id="project_proposal_preparation_process_status"
                    name="processStatus"
                  >
                    <a-input
                      v-model:value="formState.processStatus"
                      placeholder="请输入流程状态"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_process_status', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_process_key', true)" :span="12">
                  <a-form-item label="流程定义key" v-bind="validateInfos.processKey" id="project_proposal_preparation_process_key" name="processKey">
                    <a-input
                      v-model:value="formState.processKey"
                      placeholder="请输入流程定义key"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_process_key', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_process_location', true)" :span="12">
                  <a-form-item
                    label="流程当前节点"
                    v-bind="validateInfos.processLocation"
                    id="project_proposal_preparation_process_location"
                    name="processLocation"
                  >
                    <a-input
                      v-model:value="formState.processLocation"
                      placeholder="请输入流程当前节点"
                      allow-clear
                      :disabled="judgeRead('project_proposal_preparation_process_location', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_attachment_info', true)" :span="12">
                  <a-form-item
                    label="附件信息"
                    v-bind="validateInfos.attachmentInfo"
                    id="project_proposal_preparation_attachment_info"
                    name="attachmentInfo"
                  >
                    <FileUpload
                      v-model:value="formState.attachmentInfo"
                      :disabled="judgeRead('project_proposal_preparation_attachment_info', false)"
                    />
                  </a-form-item>
                </a-col>
                <a-col v-show="judgeIf('project_proposal_preparation_other_record_attachments_string', true)" :span="12">
                  <a-form-item
                    label="其他备案附件"
                    v-bind="validateInfos.otherRecordAttachmentsString"
                    id="project_proposal_preparation_other_record_attachments_string"
                    name="otherRecordAttachmentsString"
                  >
                    <FileUpload
                      v-model:value="formState.otherRecordAttachments"
                      :disabled="judgeRead('project_proposal_preparation_other_record_attachments_string', false)"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </fieldset>
        </div>

        <!-- 子表单区域 -->
        <div class="form-content-title sub-form-content-title">元素列表</div>
        <a-tabs v-model:activeKey="activeKey" animated style="overflow: hidden" @change="handleChangeTabs">
          <a-tab-pane tab="立项金额附表" key="projectAmountDetailCopy" :forceRender="true">
            <div class="dynamic-table-container">
              <!-- 操作按钮区 -->
              <div class="table-operations mb-4">
                <a-button type="primary" :disabled="disabled" @click="addRow(projectAmountDetailCopyTable)"> <plus-outlined /> 新增 </a-button>

                <!-- 仅当有选中项时显示删除按钮 -->
                <Popconfirm
                  v-if="selectedRowKeys['projectAmountDetailCopy']?.length"
                  :title="`确定要删除这 ${selectedRowKeys['projectAmountDetailCopy']?.length} 项吗?`"
                  :disabled="deleting"
                  @confirm="deleteSelectedRows(projectAmountDetailCopyTable, 'projectAmountDetailCopy')"
                >
                  <a-button preIcon="ant-design:minus-outlined" :disabled="disabled" :loading="deleting" class="ml-2">
                    <span>删除</span>
                  </a-button>
                </Popconfirm>
              </div>

              <vxe-table
                border
                :disabled="disabled"
                show-overflow
                keep-source
                height="300"
                ref="projectAmountDetailCopy"
                :data="projectAmountDetailCopyTable.dataSource"
                :edit-rules="projectAmountDetailCopyValidateRules"
                :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
                @checkbox-all="selectAllChangeEvent('projectAmountDetailCopy')"
                @checkbox-change="selectChangeEvent('projectAmountDetailCopy')"
                :loading="projectAmountDetailCopyTable.loading"
                id="id"
                header-align="center"
              >
                <vxe-column type="checkbox" width="70" fixed="left" align="center" />
                <vxe-column type="seq" title="序号" width="70" fixed="left" align="center" />
                <vxe-column
                  v-for="item in projectAmountDetailCopyTable.columns"
                  :key="item.key"
                  :field="item.key"
                  :title="item.title"
                  show-header-overflow="title"
                  show-overflow="title"
                  min-width="150"
                  :edit-render="{ name: 'input' }"
                />
              </vxe-table>
            </div>
          </a-tab-pane>
          
          <a-tab-pane tab="立项金额附表2" key="projectProposalPreparationDetailCopy" :forceRender="true">
            <div class="dynamic-table-container">
              <!-- 操作按钮区 -->
              <div class="table-operations mb-4">
                <a-button type="primary" :disabled="disabled" @click="addRow(projectProposalPreparationDetailCopyTable)"> <plus-outlined /> 新增 </a-button>

                <!-- 仅当有选中项时显示删除按钮 -->
                <Popconfirm
                  v-if="selectedRowKeys['projectProposalPreparationDetailCopy']?.length"
                  :title="`确定要删除这 ${selectedRowKeys['projectProposalPreparationDetailCopy']?.length} 项吗?`"
                  :disabled="deleting"
                  @confirm="deleteSelectedRows(projectProposalPreparationDetailCopyTable, 'projectProposalPreparationDetailCopy')"
                >
                  <a-button preIcon="ant-design:minus-outlined" :disabled="disabled" :loading="deleting" class="ml-2">
                    <span>删除</span>
                  </a-button>
                </Popconfirm>
              </div>

              <vxe-table
                border
                :disabled="disabled"
                show-overflow
                keep-source
                height="300"
                ref="projectProposalPreparationDetailCopy"
                :data="projectProposalPreparationDetailCopyTable.dataSource"
                :edit-rules="projectProposalPreparationDetailCopyValidateRules"
                :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
                @checkbox-all="selectAllChangeEvent('projectProposalPreparationDetailCopy')"
                @checkbox-change="selectChangeEvent('projectProposalPreparationDetailCopy')"
                :loading="projectProposalPreparationDetailCopyTable.loading"
                id="id"
                header-align="center"
              >
                <vxe-column type="checkbox" width="70" fixed="left" align="center" />
                <vxe-column type="seq" title="序号" width="70" fixed="left" align="center" />
                <vxe-column
                  v-for="item in projectProposalPreparationDetailCopyTable.columns"
                  :key="item.key"
                  :field="item.key"
                  :title="item.title"
                  show-header-overflow="title"
                  show-overflow="title"
                  min-width="150"
                  :edit-render="{ name: 'input' }"
                />
              </vxe-table>
            </div>
          </a-tab-pane>
        </a-tabs>

        <div v-if="curProcessInstanceId">
          <VBlaDiscuss :theme="appTheme" :locale="locale" :processInstanceId="curProcessInstanceId" :innerStyle="{ borderRadius: '8px' }" />
        </div>
      </div>
    </div>

    <div class="approval-components" :class="[operate ? 'page-operate-' + operate : '']">
      <template v-if="curProcessInstanceId">
        <VBlaDecision
          :theme="appTheme"
          :taskId="taskId"
          :locale="locale"
          :hideUrge="false"
          class="approval-decision"
          :beforeBtnClick="onApprovalBeforeBtnClick"
          :decisionClick="decisionClick"
        />
        <VBlaRecordPreview
          :theme="appTheme"
          :locale="locale"
          :processInstanceId="curProcessInstanceId"
          :previewHeight="500"
          :widgetsShowConfig="displayConfig"
          class="approval-record-preview"
          @view-chart="handleViewChart"
        />
      </template>
      <div v-else class="create-approval">
        <div class="create-approval-title">处理</div>
        <a-textarea v-model:value="submitMessage" placeholder="请输入处理意见(选填)" :rows="6" />
        <a-space class="create-approval-btns">
          <a-button :disabled="disabled" @click="onSubmitNormal" type="primary">提交</a-button>
          <a-button v-auth="'purProCopy:project_proposal_preparation_copy:saveDraft'" :disabled="disabled" @click="onDraft">保存草稿</a-button>
          <a-button v-if="flowchartOptions.length === 1" @click="openFlowchart()">流程图</a-button>
          <a-dropdown v-if="flowchartOptions.length > 1">
            <template #overlay>
              <a-menu @click="openFlowchart">
                <a-menu-item v-for="(item, index) in flowchartOptions" :key="index">
                  {{ item.processName }}
                </a-menu-item>
              </a-menu>
            </template>
            <a-button>
              流程图
              <DownOutlined />
            </a-button>
          </a-dropdown>
        </a-space>
      </div>
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, toRaw, inject, nextTick, watch, onMounted } from 'vue';
  import { useValidateAntFormAndTable, useJvxeMethod } from '/@/hooks/system/useJvxeMethods';
  import { useApprovalMethods } from '/@/hooks/system/useApprovalMethods';
  import {
    projectAmountDetailCopyList,
    projectProposalPreparationDetailCopyList,
    submit,
    saveProcess,
    saveDraft,
    getDataByTaskId,
    queryDataById,
    approvalFindNextNodeUserUrl,
    queryFlowchart,
  } from './ProjectProposalPreparation.api';
  import { projectAmountDetailCopyColumns, projectProposalPreparationDetailCopyColumns, approvalRunTaskBo } from './ProjectProposalPreparation.data';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import FileUpload from '/@/components/Form/src/cyj/components/JUploadByByteluck.vue';
  import { duplicateValidate } from '/@/utils/helper/validator';
  import { Form } from 'ant-design-vue';
  import { VBlaDiscuss, VBlaDecision, VBlaRecordPreview } from '@byteluck/approval-wc-widgets-desktop';
  import { useRoute } from 'vue-router';
  import { getToken } from '/@/utils/auth';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { useFormPermit } from '/@/components/Form/index';
  import { Popconfirm } from 'ant-design-vue';
  import DepartmentSelect from '/@/components/Form/src/cyj/components/DepartmentSelectNative.vue';
  import UserSelect from '/@/components/Form/src/cyj/components/UserSelectNative.vue';
  import { MenuUnfoldOutlined, DownOutlined } from '@ant-design/icons-vue';

  /**人员、部门弹框ref */
  const modalRefs = ref({});
  const openModalClick = (field: string) => {
    modalRefs.value[field].openModalClick();
  };
  /**人员、部门值变化事件 */
  const onChangeOfModal = (value: any, options: any, paramsField: string, valueField: string) => {
    formState[paramsField] = options.map((item) => item[valueField]);
  };

  const useForm = Form.useForm;

  const emit = defineEmits(['success']);
  const props = defineProps({
    formDisabled: {
      type: Boolean,
      default: false,
    },
    formData: { type: Object, default: () => {} },
    formBpm: { type: Boolean, default: true },
    taskId: String,
    isInModal: Boolean,
    recordId: String,
    processInstanceId: String,
    processStatus: String,
    operate: String,
    isApprovalNew: Number,
  });

  const isLoaded = ref(false);
  const token = getToken();
  const { close: closeTab } = useTabs();
  const loading = ref(true);
  const projectAmountDetailCopy = ref();
  const projectProposalPreparationDetailCopy = ref();
  const submitMessage = ref('');

  let permitEnum = ref([]);
  let { judgeIf, judeRequired, judeRequiredForNative, judgeRead } = useFormPermit(permitEnum);

  const projectAmountDetailCopyTable = ref<Record<string, any>>({
    loading: false,
    columns: [],
    dataSource: [],
    show: false,
  });
  const projectProposalPreparationDetailCopyTable = ref<Record<string, any>>({
    loading: false,
    columns: [],
    dataSource: [],
    show: false,
  });
  const refKeys = ref(['projectAmountDetailCopy', 'projectProposalPreparationDetailCopy']);
  const activeKey = ref('projectAmountDetailCopy');
  const appTheme = inject('appTheme');
  window.approvalConfig.headers = {
    authorization: token,
    'x-access-token': token,
  };
  const route = useRoute();
  const displayConfig = ref({
    flow_virtual: 'DISPLAY',
    approval_record: 'DISPLAY',
  });
  const curProcessInstanceId = ref('');
  const taskId = ref(route.query.taskId);
  const locale = ref('zh');
  const flowchartOptions = ref<any[]>([]);

  const formState = reactive<Record<string, any>>({});

  const resetFormData = () => {
    submitMessage.value = '';
    Object.assign(formState, {
      id: '',
      projectName: '',
      projectCode: '',
      compileDate: '',
      projectType: '',
      visionNo: '0',
      needExpert: '',
      expertReason: '',
      hasSubBudget: '',
      responsibleEntity: '',
      compileBasis: '',
      quantityDesc: '',
      unitPriceDesc: '',
      costCalculationDesc: '',
      benchmarkAnalysis: '',
      projectAmountDesc: '',
      projectAmountSummary: undefined,
      attachmentInfo: '',
      auditBasis: '',
      auditPrinciple: '',
      auditOpinion: '',
      recordNumber: '',
      recordAmount: undefined,
      recordReason: '',
      otherRecordAttachmentsString: '',
      processInstanceId: '',
      processStatus: '',
      processKey: '',
      processLocation: '',
    });
  };

  //表单验证
  const validatorRules = ref<any>({});

  const setValidatorRules = () => {
    const rules = {
      projectName: [{ required: judeRequiredForNative('project_proposal_preparation_project_name', true), message: '请输入立项名称	!' }],
      projectCode: [
        { required: judeRequiredForNative('project_proposal_preparation_project_code', false), message: '请输入编制时间!' },
        { validator: projectCodeDuplicatevalidate },
      ],
      compileDate: [{ required: judeRequiredForNative('project_proposal_preparation_compile_date', true), message: '请输入编制时间!' }],
      projectType: [{ required: judeRequiredForNative('project_proposal_preparation_project_type', false), message: '请选择项目类别!' }],
      visionNo: [
        { required: judeRequiredForNative('project_proposal_preparation_vision_no', true), message: '请输入版本号!' },
        { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' },
      ],
      needExpert: [{ required: judeRequiredForNative('project_proposal_preparation_need_expert', true), message: '请输入是否需集团审批!' }],
      expertReason: [{ required: judeRequiredForNative('project_proposal_preparation_expert_reason', true), message: '请输入需集团审批原因!' }],
      hasSubBudget: [{ required: judeRequiredForNative('project_proposal_preparation_has_sub_budget', false), message: '请选择集团归口部门!' }],
      responsibleEntity: [
        { required: judeRequiredForNative('project_proposal_preparation_responsible_entity', true), message: '请输入项目责任主体!' },
      ],
      compileBasis: [{ required: judeRequiredForNative('project_proposal_preparation_responsible_entity', false), message: '请输入编制依据!' }],
      quantityDesc: [{ required: judeRequiredForNative('project_proposal_preparation_quantity_desc', false), message: '请输入工程量说明!' }],
      unitPriceDesc: [{ required: judeRequiredForNative('project_proposal_preparation_unit_price_desc', false), message: '请输入单价说明!' }],
      costCalculationDesc: [
        { required: judeRequiredForNative('project_proposal_preparation_cost_calculation_desc', false), message: '请输入费用计算说明!' },
      ],
      benchmarkAnalysis: [{ required: judeRequiredForNative('project_proposal_preparation_benchmark_analysis', false), message: '请输入对标分析!' }],
      projectAmountDesc: [
        { required: judeRequiredForNative('project_proposal_preparation_project_amount_desc', false), message: '请输入立项金额说明!' },
      ],
      projectAmountSummary: [
        { required: judeRequiredForNative('project_proposal_preparation_project_amount_summary', false), message: '请输入立项总金额!' },
        { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' },
      ],
      attachmentInfo: [{ required: judeRequiredForNative('project_proposal_preparation_project_amount_summary', true), message: '请输入附件信息!' }],
      auditBasis: [{ required: judeRequiredForNative('project_proposal_preparation_audit_basis', false), message: '请输入审核依据!' }],
      auditPrinciple: [{ required: judeRequiredForNative('project_proposal_preparation_audit_principle', false), message: '请输入审核原则!' }],
      auditOpinion: [{ required: judeRequiredForNative('project_proposal_preparation_audit_opinion', false), message: '请输入审核意见!' }],
      recordNumber: [{ required: judeRequiredForNative('project_proposal_preparation_record_number', false), message: '请输入备案编号!' }],
      recordAmount: [
        { required: judeRequiredForNative('project_proposal_preparation_record_amount', false) },
        { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' },
      ],
      recordReason: [{ required: judeRequiredForNative('project_proposal_preparation_record_reason', false), message: '请输入备案原因!' }],
      otherRecordAttachmentsString: [
        {
          required: judeRequiredForNative('project_proposal_preparation_other_record_attachments_string', false),
          message: '请输入其他备案附件!',
        },
      ],
      processInstanceId: [
        { required: judeRequiredForNative('project_proposal_preparation_process_instance_id', false), message: '请输入流程实例id!' },
      ],
      processStatus: [{ processStatus: judeRequiredForNative('project_proposal_preparation_process_status', false), message: '请输入流程状态!' }],
      processKey: [{ processStatus: judeRequiredForNative('project_proposal_preparation_process_key', false), message: '请输入流程定义key!' }],
      processLocation: [
        { processStatus: judeRequiredForNative('project_proposal_preparation_process_location', false), message: '请输入流程当前节点!' },
      ],
    };
    validatorRules.value = rules;
  };

  const projectAmountDetailCopyValidateRules = ref({});
  const projectProposalPreparationDetailCopyValidateRules = ref({});

  const setSubTableColumns = () => {
    projectAmountDetailCopyTable.value.columns = projectAmountDetailCopyColumns.reduce((pre: any[], cur) => {
      const columnKey = cur.key;
      let fieldkey = 'project_amount_detail_' + columnKey;
      // 驼峰转下划线
      fieldkey = fieldkey.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
      if (!judgeIf(fieldkey, true)) {
        return pre;
      }
      let mItem = { ...cur };
      mItem.disabled = judgeRead(fieldkey, cur.disabled);

      let required = judeRequired(fieldkey, cur.validateRules?.length);
      if (!required) {
        mItem.validateRules = [];
      } else {
        const hasRequired = cur.validateRules?.filter((item) => {
          if (item.required) {
            return item;
          }
        });
        if (!hasRequired) {
          mItem.validateRules = [{ required: true, message: `请输入${cur.title}!` }].concat(cur.validateRules || []);
        }
      }
      pre.push(mItem);
      if (mItem.validateRules && mItem.validateRules.length > 0) {
        projectAmountDetailCopyValidateRules.value[columnKey] = mItem.validateRules;
      }
      return pre;
    }, []);
    
    projectProposalPreparationDetailCopyTable.value.columns = projectProposalPreparationDetailCopyColumns.reduce((pre: any[], cur) => {
      const columnKey = cur.key;
      let fieldkey = 'project_amount_detail_' + columnKey;
      // 驼峰转下划线
      fieldkey = fieldkey.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
      if (!judgeIf(fieldkey, true)) {
        return pre;
      }
      let mItem = { ...cur };
      mItem.disabled = judgeRead(fieldkey, cur.disabled);

      let required = judeRequired(fieldkey, cur.validateRules?.length);
      if (!required) {
        mItem.validateRules = [];
      } else {
        const hasRequired = cur.validateRules?.filter((item) => {
          if (item.required) {
            return item;
          }
        });
        if (!hasRequired) {
          mItem.validateRules = [{ required: true, message: `请输入${cur.title}!` }].concat(cur.validateRules || []);
        }
      }
      pre.push(mItem);
      if (mItem.validateRules && mItem.validateRules.length > 0) {
        projectProposalPreparationDetailCopyValidateRules.value[columnKey] = mItem.validateRules;
      }
      return pre;
    }, []);
  };

  const { validate, validateInfos } = useForm(formState, validatorRules, { immediate: false, deep: true });
  const formItemLayout = {
    labelCol: { xs: { span: 24 }, sm: { span: 5 } },
    wrapperCol: { xs: { span: 24 }, sm: { span: 16 } },
  };

  // 表单禁用
  const disabled = computed(() => {
    if (props.formBpm === true) {
      if (props.formData?.disabled === true) {
        return true;
      } else {
        return false;
      }
    }
    return props.formDisabled;
  });

  const tableRefs = {
    projectAmountDetailCopy: projectAmountDetailCopy,
    projectProposalPreparationDetailCopy: projectProposalPreparationDetailCopy,
  };
  let handleChangeTabs: any;
  let handleSubmit: any;
  let requestSubTableData: any;

  const getSubTableData = async (noValidate?: boolean) => {
    let subData = {};
    for (const key in tableRefs) {
      const instance = tableRefs[key].value;
      let error = null;
      if (!noValidate) {
        error = await instance.validate(true);
      }

      if (!error) {
        const data = instance.getData() || [];
        data.forEach(item => {
          if(!item.createBy){
            delete item.id
          }
        })
        subData[key + 'List'] = data;
      } else {
        // 自动重置scrollTop状态，防止出现白屏
        instance.resetScrollTop(0);
        return Promise.reject(1);
      }
    }

    return subData;
  };
  const validateSubTableData = async () => {
    for (const key in tableRefs) {
      const instance = tableRefs[key].value;
      let error = await instance.validate(true);

      if (error) {
        // 自动重置scrollTop状态，防止出现白屏
        instance.resetScrollTop(0);
        return Promise.reject(1);
      }
    }
  };
  const { transformData } = useValidateAntFormAndTable(activeKey, {
    projectAmountDetailCopy: projectAmountDetailCopy,
    projectProposalPreparationDetailCopy: projectProposalPreparationDetailCopy,
  });

  const formRef = ref();

  async function validateForm() {
    try {
      // 触发表单验证
      await validate();
      await validateSubTableData();
      return Promise.resolve(true);
    } catch ({ errorFields }) {
      if (errorFields) {
        const firstField = errorFields[0];
        if (firstField) {
          formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
        }
      }
      return Promise.reject(errorFields);
    }
  }

  async function getFormData() {
    await validateForm();
    return transformData(toRaw(formState));
  }

  async function submitForm() {
    const mainData = await getFormData();
    const subData = await getSubTableData();
    const values = Object.assign({}, mainData, subData);
    await submit({
      data: values,
      runTaskBo: {
        ...approvalRunTaskBo,
        task_comment: submitMessage.value,
      },
    });
  }

  async function getFullData() {
    const mainData = await getFormData();
    const subData = await getSubTableData();
    const values = Object.assign({}, mainData, subData);
    return values;
  }

  const { onApprovalBeforeBtnClick } = useApprovalMethods({
    getFormData: getFullData,
    approvalFindNextNodeUserUrl,
    taskId: taskId,
  });

  async function onSubmitNormal() {
    if (props.recordId) {
      let data = await getFullData();
      await saveProcess({
        data,
        runTaskBo: {
          ...approvalRunTaskBo,
          task_comment: submitMessage.value,
        },
      });
    } else {
      await submitForm();
    }

    closePage();
  }

  async function projectCodeDuplicatevalidate(_r, value) {
    return duplicateValidate('project_proposal_preparation', 'project_code', value, formState.id || '');
  }

  async function requestAddOrEdit(values) {
    return values;
  }

  function classifyIntoFormData(allValues) {
    let main = Object.assign({}, allValues.formValue);
    return {
      ...main,
      projectAmountDetailCopyList: allValues.tablesValue[0].tableData,
      projectProposalPreparationDetailCopyList: allValues.tablesValue[1].tableData,
    };
  }

  const closePage = () => {
    if (props.isInModal) {
      emit('success');
    } else {
      if (props.taskId !== undefined) {
        window.parent.setvvisible();
      } else {
        closeTab();
      }
    }
  };

  const openFlowchart = (info?: any) => {
    let index = 0
    if(info){
      index = info.key
    }
    let item = flowchartOptions.value[index]
    const previewchartPath = window.approvalConfig?.previewchartPath || '';
    const processKey = item.processKey
    const processName = item.processName
    const view_url = `${previewchartPath}/ego-bpa-front/#/home/FlowDetail?processKey=${processKey}&processName=${processName}`;
    window.open(view_url, '_blank');
  }

  const decisionClick = async (evt) => {
    if (evt.command_id === 'generalTaskNotice') {
      return;
    }
    // 执行内部提交
    let data = await getFullData();
    await saveProcess({
      data,
      runTaskBo: evt,
    });

    closePage();
  };

  const onDraft = async () => {
    const mainData = transformData(toRaw(formState));
    const subData = await getSubTableData(true);
    const values = Object.assign({}, mainData, subData);
    await saveDraft(values);

    closePage();
  };

  const handleViewChart = () => {
    const previewchartPath = window.approvalConfig?.previewchartPath || '';
    const view_url = `${previewchartPath}/ego-bpa-front/#/home/FlowDetail?uId=${curProcessInstanceId.value}`;
    window.open(view_url, '_blank');
  };

  async function queryMainData(id) {
    const row = await queryDataById(id);
    const tmpData = {};
    Object.keys(formState).forEach((key) => {
      if (row.hasOwnProperty(key)) {
        tmpData[key] = row[key];
      }
    });
    //赋值
    Object.assign(formState, tmpData);
  }

  async function initFlowchartOptions() {
    const list = await queryFlowchart()
    flowchartOptions.value = list
  }

  async function initFormData() {
    resetFormData();
    let params;
    if (props.taskId) {
      taskId.value = props.taskId;
    }
    if (taskId.value) {
      params = { taskInstanceId: taskId.value };
    } else if (props.processInstanceId) {
      params = { processInstanceId: props.processInstanceId };
    }

    if (!taskId.value && !props.recordId && !props.processInstanceId && props.operate !== 'create') {
      return;
    }

    if(props.operate === 'create' || props.processStatus === 'DRAFT'){
      initFlowchartOptions()
    }

    let res: any = {};
    let mainRecordId = '';
    if (taskId.value || props.processInstanceId) {
      res = await getDataByTaskId(params);
      curProcessInstanceId.value = res.processParam?.processInstanceId;
      permitEnum.value = res.permissions;
      Object.assign(formState, res.data);
      mainRecordId = res?.data?.id;
    } else if (props.recordId) {
      queryMainData(props.recordId);
      mainRecordId = props.recordId;
    }

    setValidatorRules();
    setSubTableColumns();
    isLoaded.value = true;

    await nextTick();
    const useJvxeMethodRes = useJvxeMethod({ requestAddOrEdit, classifyIntoFormData, tableRefs, activeKey, refKeys });
    handleChangeTabs = useJvxeMethodRes.handleChangeTabs;
    handleSubmit = useJvxeMethodRes.handleSubmit;
    requestSubTableData = useJvxeMethodRes.requestSubTableData;

    if (mainRecordId) {
      requestSubTableData(projectAmountDetailCopyList, { id: mainRecordId }, projectAmountDetailCopyTable.value, () => {
        projectAmountDetailCopyTable.value.show = true;
      });
      requestSubTableData(projectProposalPreparationDetailCopyList, { id: mainRecordId }, projectProposalPreparationDetailCopyTable.value, () => {
        projectProposalPreparationDetailCopyTable.value.show = true;
      });
    }

    loading.value = false;
  }

  //原生列表 -- start

  // 选中的行ID
  const selectedRowKeys = ref<any>({});
  // 处理选择变化
  const selectAllChangeEvent = (refKey: string) => {
    const $table = tableRefs[refKey].value;
    if ($table) {
      const records = $table.getCheckboxRecords();
      selectedRowKeys.value[refKey] = records.map((item) => item.id);
    }
  };

  const selectChangeEvent = (refKey: string) => {
    const $table = tableRefs[refKey].value;
    if ($table) {
      const records = $table.getCheckboxRecords();
      selectedRowKeys.value[refKey] = records.map((item) => item.id);
    }
  };

  // 新增行
  const addRow = (table: any) => {
    const newId = Math.max(...table.dataSource.map((row) => row.id), 0) + 1;
    table.dataSource.push({
      id: newId,
      projectName: '',
      itemName: '',
    });
  };

  const deleting = ref(false);
  let deleteTimer: any = null;
  // 删除选中行
  const deleteSelectedRows = (table: any, refKey: string) => {
    deleting.value = true;
    table.dataSource = table.dataSource.filter((row) => !selectedRowKeys.value[refKey].includes(row.id));
    selectedRowKeys.value[refKey] = [];
    if (deleteTimer) {
      clearTimeout(deleteTimer);
    }
    deleteTimer = setTimeout(() => (deleting.value = false), 300);
  };

  //原生列表 -- end

  watch(
    () => props.isApprovalNew,
    (val) => {
      initFormData();
    },
    { immediate: true }
  );

</script>

<style lang="less" scoped>
  @import '/@/design/reference/form.less';

  .ant-tabs-tabpane.sub-one-form {
    max-height: 340px;
    overflow: auto;
  }

  @approval-components-width: 400px;
  .approval-native-form-page {
    height: calc(100vh - 60px - 72px);
    &.is-in-model {
      height: 100%;
    }

    & > :deep(.ant-spin-container) {
      display: flex;
      justify-content: space-between;
      height: 100%;
      flex-direction: row;
    }
  }

  .approval-native-form {
    width: calc(100% - @approval-components-width);
    background-color: #eee;
    height: 100%;
    overflow: auto;
  }

  .approval-components {
    width: @approval-components-width;
    background-color: #fff;
    flex-shrink: 0;
    height: 100%;
  }
  .approval-record-preview {
    height: calc(100% - 264px);

    :deep(.approve-progress) {
      height: 100%;
    }
    :deep(.bla-record-preview),
    :deep(.notice-record) {
      height: calc(100% - 62px);
      overflow: auto;
    }
  }

  .page-operate-view {
    .approval-record-preview {
      height: 100%;
    }
  }

  :deep(.decison) {
    position: relative;
    padding: 12px;
    border-radius: 8px;
  }
  :deep(.discuss) {
    padding: 12px 0 0 0;
  }

  .sub-form-content-title {
    margin-bottom: 0;
  }

  .create-approval {
    padding: 12px;
  }
  .create-approval-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 22px;
    color: #1f2329;
    margin-bottom: 8px;
  }

  .approval-form-container {
    min-height: 100%;
    padding: 16px;
    background-color: #fff;
  }

  .create-approval-btns {
    margin-top: 30px;
  }

  .cyj-and-modal-form {
    :deep(.ant-form-item-label) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 6px;
      > label {
        line-height: 32px;
        display: inline;
        &::after {
          margin-right: 0;
        }
      }
    }
  }
  .cyj-form-container-disabled {
    cursor: not-allowed;
  }
  .cyj-form-container-disabled fieldset[disabled] {
    -ms-pointer-events: none;
    pointer-events: none;
  }
  .cyj-form-container-disabled :deep(.ant-select) {
    -ms-pointer-events: none;
    pointer-events: none;
  }
  html[data-theme='light'] {
    .cyj-form-detail-effect {
      :deep(.ant-select-selector),
      :deep(.ant-btn),
      :deep(.ant-input),
      :deep(.ant-input-affix-wrapper),
      :deep(.ant-picker),
      :deep(.ant-input-number) {
        color: #606266 !important;
      }
      :deep(.ant-select) {
        color: #606266 !important;
      }
      :deep(.ant-select-selection-item-content),
      :deep(.ant-select-selection-item),
      :deep(input) {
        color: #606266 !important;
      }

      :deep(.ant-radio-wrapper),
      :deep(.ant-checkbox-wrapper),
      :deep(.ant-btn) {
        color: rgba(0, 0, 0, 0.65);
      }
      :deep(.ant-radio-wrapper .ant-radio-inner:after),
      :deep(.ant-checkbox-checked .ant-checkbox-inner) {
        color: #606266 !important;
      }
      :deep(.ant-radio-inner),
      :deep(.ant-checkbox-inner) {
        border-color: rgba(51, 51, 51, 0.25) !important;
        background-color: rgba(51, 51, 51, 0.04) !important;
      }
      :deep(.ant-checkbox-checked .ant-checkbox-inner::after),
      :deep(.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after) {
        border-color: rgba(51, 51, 51, 0.25) !important;
      }
      :deep(.ant-switch) {
        background-color: rgba(51, 51, 51, 0.25);
      }
      :deep(.tox .tox-toolbar__group),
      :deep(.tox .tox-edit-area__iframe),
      :deep(.vditor-toolbar),
      :deep(.vditor-preview),
      :deep(.cyj-tinymce-img-upload) {
        background: rgba(51, 51, 51, 0.04);
      }
    }
  }

  html[data-theme='dark'] {
    .cyj-form-detail-effect {
      :deep(.ant-select-selector),
      :deep(.ant-btn),
      :deep(.ant-input),
      :deep(.ant-input-affix-wrapper),
      :deep(.ant-picker),
      :deep(.ant-input-number) {
        color: rgba(255, 255, 255, 0.25) !important;
      }
      :deep(.ant-select) {
        color: rgba(255, 255, 255, 0.25) !important;
      }
      :deep(.ant-select-selection-item-content),
      :deep(.ant-select-selection-item),
      :deep(input) {
        color: rgba(255, 255, 255, 0.25) !important;
      }

      :deep(.ant-radio-wrapper),
      :deep(.ant-checkbox-wrapper) {
        color: rgba(255, 255, 255, 0.25);
      }
      :deep(.ant-radio-wrapper .ant-radio-inner:after),
      :deep(.ant-checkbox-checked .ant-checkbox-inner) {
        background-color: rgba(255, 255, 255, 0.08);
      }
      :deep(.ant-radio-inner),
      :deep(.ant-checkbox-inner) {
        border-color: #424242 !important;
        background-color: rgba(255, 255, 255, 0.08);
      }
      :deep(.ant-switch) {
        background-color: rgba(51, 51, 51, 0.25);
        opacity: 0.65;
      }
      :deep(.tox .tox-toolbar__group),
      :deep(.tox .tox-edit-area__iframe),
      :deep(.vditor-toolbar),
      :deep(.vditor-preview),
      :deep(.cyj-tinymce-img-upload) {
        background: rgba(51, 51, 51, 0.04);
      }
    }
  }
  .cyj-form-container-disabled :deep(.ant-upload-select) {
    cursor: grabbing;
  }
  .cyj-form-container-disabled :deep(.ant-upload-list) {
    cursor: grabbing;
  }
  .cyj-form-container-disabled fieldset[disabled] iframe {
    -ms-pointer-events: auto !important;
    pointer-events: auto !important;
  }
  .cyj-form-container-disabled :deep(.ant-upload-list-item-actions .anticon-delete),
  .cyj-form-container-disabled :deep(.ant-upload-list-item .anticon-close) {
    display: none;
  }
  .cyj-form-container-disabled :deep(.vditor-sv) {
    display: none !important;
    background: rgba(51, 51, 51, 0.04);
  }
</style>
<style lang="less">
  .ant-modal-body {
    & > .approval-native-form-page {
      height: 100%;
    }
  }
</style>
